<template>
  <div class="appRzxxInfo">
    <el-dialog :title="dialogAppRzxxInfo.title" v-model="obj.visible" @update:model-value="dialogAppRzxxInfoChange" :style="{ right: '20px', top: '50%', transform: 'translateY(-50%)', position: 'fixed', margin: '0' }" width="600px">
      <!-- 步骤导航 -->
      <el-steps :active="activeStep" finish-status="success" align-center style="margin-bottom: 20px;">
        <el-step title="基本信息"></el-step>
        <el-step title="企业信息"></el-step>
      </el-steps>

      <!-- 步骤内容区域 -->
      <div class="steps-content">
        <!-- 步骤 1：基本信息 -->
        <div v-if="activeStep === 0">
          <el-form
            ref="miniProgramAuthenticationFormRef"
            :model="form"
            label-width="130px"
            :rules="rules"
          >
            <el-form-item label="账号名称" prop="accountName">
              <el-input style="color: #2eb3b3" v-model="form.accountName" placeholder="请输入小程序名称" :disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="命名类型" prop="accountNameType">
              <el-radio-group v-model="form.accountNameType">
                <el-radio :value="1">基于自选词汇命名</el-radio>
                <el-radio :value="2">基于商标命名</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="命名补充材料" prop="accountSupplemental">
              <image-upload
                v-model="form.accountSupplemental"
                :limit="10"
                :isShowTip="false"
              >
              </image-upload>
              <span style="font-size: 10px;">支持格式为png、bmp、jpeg、jpg、gif，大小不超过2M，最多可上传10张；</span>
            </el-form-item>

            <el-form-item label="联系电话" prop="thirdPartyPhone">
              <el-input v-model="form.thirdPartyPhone" placeholder="请输入联系电话"></el-input>
            </el-form-item>

            <el-form-item label="支付方式" prop="payType">
              <el-radio-group v-model="form.payType">
                <el-radio :value="1">消耗服务商预购包</el-radio>
                <el-radio :value="2">小程序开发者自行支付</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="服务市场appId" prop="serviceAppid">
              <el-input v-model="form.serviceAppid" placeholder="请输入服务市场appId"></el-input>
            </el-form-item>

            <el-form-item label="资质证明材料" prop="qualificationOther">
              <image-upload
                v-model="form.qualificationOther"
                :limit="10"
                :isShowTip="false"
              >
              </image-upload>
              <span style="font-size: 10px;">支持格式为png、bmp、jpeg、jpg、gif，大小不超过2M，最多可上传10张；</span>
            </el-form-item>
          </el-form>
        </div>

        <!-- 步骤 2：企业信息 -->
        <div v-else-if="activeStep === 1">
          <el-form
            ref="miniProgramAuthenticationFormRef"
            :model="form"
            label-width="120px"
            :rules="rules"
          >
            <el-form-item label="联系人姓名" prop="name">
              <el-input v-model="form.name" placeholder="请输入联系人姓名"></el-input>
            </el-form-item>

            <el-form-item label="联系人邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入联系人邮箱"></el-input>
            </el-form-item>

            <el-form-item label="联系人手机号" prop="mobile">
              <el-input v-model="form.mobile" placeholder="请输入联系人手机号"></el-input>
            </el-form-item>

            <el-form-item label="发票类型" prop="invoiceType">
              <el-radio-group v-model="form.invoiceType">
                <el-radio :value="1">不开发票</el-radio>
                <el-radio :value="2">电子发票</el-radio>
                <el-radio :value="3">增值税专票</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="纳税识别号" prop="taxpayerId" v-if="form.invoiceType != '1'">
              <el-input v-model="form.taxpayerId" placeholder="请输入纳税识别号"></el-input>
            </el-form-item>

            <el-form-item label="企业电话" prop="enterprisePhone" v-if="form.invoiceType == '3'">
              <el-input v-model="form.enterprisePhone" placeholder="请输入企业电话"></el-input>
            </el-form-item>

            <el-form-item label="企业注册地址" prop="enterpriseAddress" v-if="form.invoiceType == '3'">
              <el-input v-model="form.enterpriseAddress" placeholder="请输入企业注册地址"></el-input>
            </el-form-item>

            <el-form-item label="企业开户银行" prop="bankName" v-if="form.invoiceType == '3'">
              <el-input v-model="form.bankName" placeholder="请输入企业开户银行"></el-input>
            </el-form-item>

            <el-form-item label="企业银行账号" prop="bankAccount" v-if="form.invoiceType == '3'">
              <el-input v-model="form.bankAccount" placeholder="请输入企业银行账号"></el-input>
            </el-form-item>

            <el-form-item label="发票备注" prop="descRemark" v-if="form.invoiceType == '3'">
              <el-input
                type="textarea"
                v-model="form.descRemark"
                placeholder="请输入备注信息"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <!-- 底部按钮区域 -->
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button v-if="activeStep === 0" type="primary" @click="validateAndNext">下一步</el-button>
        <el-button v-if="activeStep > 0" type="primary" @click="validateAndUpper">上一步</el-button>
        <el-button v-if="activeStep === 1" :loading="buttonLoading" type="primary" @click="submitForm">保存</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="AppRzxxInfo" lang="ts">
  import { listMiniProgramAuthentication, getMiniProgramAuthentication, delMiniProgramAuthentication, addMiniProgramAuthentication, updateMiniProgramAuthentication } from '@/api/platform/miniProgramAuthentication';
  import { listMiniProgramBaseInfo, getMiniProgramBaseInfo, delMiniProgramBaseInfo, addMiniProgramBaseInfo, updateMiniProgramBaseInfo } from '@/api/platform/miniProgramBaseInfo';
  import { MiniProgramAuthenticationVO, MiniProgramAuthenticationQuery, MiniProgramAuthenticationForm } from '@/api/platform/miniProgramAuthentication/types';
  import { ref } from 'vue'
  const obj = defineProps({
    rzId: {
      type: Number,
      default: undefined
    },
    id: {
      type: Number,
      default: undefined
    },
    visible: {
      type: Boolean,
      default: false
    }
  }) //
  const { proxy } = getCurrentInstance() as ComponentInternalInstance;
  const miniProgramAuthenticationFormRef = ref<ElFormInstance>();
  const disabled = ref(false);
  const buttonLoading = ref(false);
  // 当前步骤（0:基本信息，1:联系人信息）
  const activeStep = ref(0);

  const dialogAppRzxxInfo = reactive<DialogOption>({
    visible: false,
    title: '认证信息填写'
  });

  const initFormData: MiniProgramAuthenticationForm = {
    id: undefined,
    baseId: undefined,
    nickName:undefined,
    customerType: undefined,
    payType: undefined,
    qualificationOther: undefined,
    accountName: undefined,
    accountNameType: undefined,
    accountSupplemental: undefined,
    authIdentification: undefined,
    authIdentMaterial: undefined,
    thirdPartyPhone: undefined,
    serviceAppid: undefined,
    name: undefined,
    email: undefined,
    mobile: undefined,
    invoiceType: undefined,
    taxpayerId: undefined,
    enterprisePhone: undefined,
    enterpriseAddress: undefined,
    bankName: undefined,
    bankAccount: undefined,
    descRemark: undefined,
    remark: undefined
  }
  const data = reactive<PageData<MiniProgramAuthenticationForm, MiniProgramAuthenticationQuery>>({
    form: {...initFormData},
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      baseId: undefined,
      customerType: undefined,
      payType: undefined,
      qualificationOther: undefined,
      accountName: undefined,
      accountNameType: undefined,
      accountSupplemental: undefined,
      authIdentification: undefined,
      authIdentMaterial: undefined,
      thirdPartyPhone: undefined,
      serviceAppid: undefined,
      name: undefined,
      email: undefined,
      mobile: undefined,
      invoiceType: undefined,
      taxpayerId: undefined,
      enterprisePhone: undefined,
      enterpriseAddress: undefined,
      bankName: undefined,
      bankAccount: undefined,
      descRemark: undefined,
      params: {
      }
    },
    rules: {
      accountNameType: [
        { required: true, message: "请选择命名类型", trigger: "blur" }
      ],
      accountSupplemental: [
        { required: true, message: "请上传命名补充材料", trigger: "change" }
      ],
      thirdPartyPhone: [
        { required: true, message: "请输入联系电话", trigger: "blur" }
      ],
      payType: [
        { required: true, message: "请选择支付方式", trigger: "blur" }
      ],
      serviceAppid: [
        { required: true, message: "请输入服务市场appId", trigger: "change" }
      ],
      qualificationOther: [
        { required: true, message: "请上传资质证明材料", trigger: "change" }
      ],
    }
  });
  const { queryParams, form, rules } = toRefs(data);

  const emit = defineEmits(['update:visible']);
  const dialogAppRzxxInfoChange = (val: boolean) => {
    emit('update:visible', val);
  }

  /** 表单重置 */
  const reset = () => {
    form.value = {...initFormData};
    miniProgramAuthenticationFormRef.value?.resetFields();
  }

  /** 详情按钮操作 */
  const getInfo = async () => {
    let _id = obj.rzId;
    if(_id!=undefined){
      const res = await getMiniProgramAuthentication(_id);
      form.value=res.data;
      if(obj.id!=undefined&&obj.id!=null){
        const res = await getMiniProgramBaseInfo(obj.id);
        form.value.accountName=res.data.nickName;
        form.value.baseId=obj.id;
      }
      dialogAppRzxxInfo.visible = true;
      dialogAppRzxxInfo.title = '认证信息修改'
    }else{
      if(obj.id!=undefined&&obj.id!=null){
        const res = await getMiniProgramBaseInfo(obj.id);
        form.value.accountName=res.data.nickName;
        form.value.baseId=obj.id;
      }
      dialogAppRzxxInfo.visible = true;
    }
  }


  /** 取消按钮 */
  const cancel = () => {
    reset();
    dialogAppRzxxInfoChange(false);
  }

  /** 提交按钮 */
  const submitForm = () => {
    miniProgramAuthenticationFormRef.value?.validate(async (valid: boolean) => {
      if (valid) {
        buttonLoading.value = true;
        if (form.value.id) {
          await updateMiniProgramAuthentication(form.value).finally(() =>  buttonLoading.value = false);
        } else {
          await addMiniProgramAuthentication(form.value).finally(() =>  buttonLoading.value = false);
        }
        proxy?.$modal.msgSuccess("操作成功");
        dialogAppRzxxInfo.visible = false;
      }
    });
  }

  // 进入下一步
  const validateAndNext = () => {
      activeStep.value = 1; // 进入企业信息步骤
  };
  // 进入上一步
  const validateAndUpper = () => {
    activeStep.value = 0; // 进入企业信息步骤
  };

  onMounted(() => {
    getInfo();
  });

</script>

<style lang="scss">
  /* 步骤内容间距 */
  .steps-content {
    margin-top: 20px;
  }
  /* 上传组件样式（按需调整） */
  .upload-demo {
    margin-top: 8px;
  }
</style>
